<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>请假申请</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-blue/easyui.css">
<style type="text/css"></style>
</head>
<body>
<style type="text/css">
	body{
		background-color:#F3F3F3;
	}
	*{
		margin:0px;
		padding:0px;
	}
	.background{
		width:1000px;
		height: 750px;
		background-color:#fff;
		margin:0px auto;
	}
	.apply-news{
		width:900px;
		height:30px;
		border-bottom:1px solid #EDEDED;
		margin:0px auto;
	}
	.text-news{
		width:100px;
		height:30px;
		color: #1AB394;
    	font-weight: 700;
    	font-size:14px;
	}
	.apply-content{
		width:900px;
		height: 271px;
		margin:0px auto;
		margin-top:20px;
	}
	.apply-center{
		width:800px;
		height: 270px;
		margin:0px auto;
	}
	.center,.center-1,.center-2,.center-3,.center-5{
		width:800px;
		height:30px;
	}
	.center-4{
		height:60px;
	}
	.jqlx,.text-xjsh,.apply-xjsc,.shenqing,.fujian{
		width:80px;
		height:25px;
		font-weight: 700;
		font-size:14px;
		color: #6E6E6E;
		margin-top:3px;
		float:left;
	}
	.select-option{
		width:100px;
		height:25px;
		border:1px solid #CCCCCC;
		border-radius:4px;
		font-size:14px;
	}
	#date-kaishi,#date-jieshu{
		width:180px;		
	}
	.textbox-invalid,.validatebox-invalid{
		border:1px solid #CCCCCC;
		background-color: #fff;
		border-radius:4px;		
		height:24px;
		font-size:14px;
		line-height: 24px;
	}
	.textbox{
		border-radius:4px;
		height:24px;
		border:1px solid #CCCCCC;
		margin-left:30px;
	}
	#day{
		width:180px;
		height:24px;
		border:1px solid #CCCCCC;
		border-radius:4px;
	}
	.tian{
		width: 36px;
	    height: 22px;
	    background-color: #EEEEEE;
	    border-left: 1px solid #CCCCCC;
	    float: right;
	    margin-right: 288px;
	    position: relative;
	   	right: 251px;
	    top: 1px;
	    font-size: 14px;
	    line-height: 22px;
	    color:#6E6E6E;
	    text-indent: 10px;
	}
	.apply-zhi{
		width: 24px;
	    height: 24px;
	    float: right;
	    color: #6E6E6E;
	    position: relative;
	    right: 338px;
	}
	.rili{
		width: 700px;
	    height: 30px;
	    float: left;
	    margin-left: -31px;
	}
	.tishi{
		width: 200px;
	    height: 30px;
	    color: #6E6E6E;
	    font-size: 11px;
	    float: right;
	    margin-right: -52px;
	    margin-top: 3px;	
	}
	.textarea{
		width: 642px;
    	height: 50px;
		border:1px solid #CCCCCC;
		border-radius:4px;
	}
	.select-file{
		width: 120px;
	    height: 28px;
	    border-radius: 5px;
	    background-color: #30B399;
	    color: #FFF;
	    font-weight: 700;
	    border: 1px solid #fff;
	}
	.span-text,.span-file{
		font-size:12px;
		color:#6E6E6E;
	}
	.span-file{
		margin-left:130px;
	}
	.noselect{
		width: 637px;
	    height: 60px;
	    border-top: 1px solid #EEEEEE;
	    margin: 0 auto;
	    margin-top: 20px;
	    color: #bfbfbf;
		text-align: center;
    	font-size: 24px;
    	line-height: 55px;
	}
	.apply-end{
		width:900px;
		height: 372px;
		margin:0px auto;		
	}
	.spr{
		width:60px;
		height:25px;
		font-size:12px;
		color: #1AB394;
    	font-weight: 700;
    	font-size:14px;
	}
	.spr-box{
	    width: 898px;
	    height: 160px;
	    border: 1px solid #E5E6E7;
	    min-height: 130px;
	    background-color: rgba(255,255,255,1);
	    box-sizing: border-box;
	    border-width: 1px;
	    border-style: solid;
	    border-color: rgba(229,230,231,1);
	    border-radius: 2px;
	    position: relative;
	    padding: 20px;
	}
	.tijiao{
		width:80px;
		height: 22px;
	    border-radius: 4px;
	    background-color: #30B399;
	    color: #fff;
	    text-align: center;
	    font-size: 13px;
	    line-height: 22px;
	    position: fixed;
	    left: 630px;
	    top: 625px;
	}
	.tianjia1{
		width: 65px;
	    height: 25px;
	    background-color: #19AA8D;
	    font-size: 12px;
	    color: #fff;
	    float: right;
	    margin-top: 110px;
	    margin-right: 10px;
	    border-radius: 4px;
	    text-align: center;
	    line-height: 25px;
	}
	.pic{
		width: 80px;
	    height: 100px;
	    margin-right: 50px;
	    float: left;
	    position: relative;
	}
	.pic div{
		text-align: center;
	}
	.pic img{
		width: 80px;
	    height: 80px;
	    border-radius: 50%;
	    vertical-align: middle;
	}
	.textsex{
		width: 16px;
	    height: 16px;
	    background-color: rgba(24,166,137,1);
	    position: absolute;
	    line-height: 20px;
	    right: 4px;
	    top: 65px;
	    border-radius: 50%;
	}
	.report-pic{
		padding-top: 10px;
	    font-size: 15px;
	    color: #666;
	}
	
	.modal{
		overflow-x: hidden;
    	overflow-y: auto;
    	opacity: 1;
    	position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1050;
	    outline: 0;
	    display: none;
	}
	.modal-dialog{
		transform: translate(0,0);
		width: 600px;
    	margin: 30px auto;
    	position: relative;
	}
	.modal-content{
		border: none;
    	border-radius: 4px;
    	box-shadow: 2px 2px 6px rgba(0,0,0,.349019607843137);
    	position: relative;
    	background-color: #fff;
    	background-clip: padding-box;
    	outline: 0;
    	font-size: 12px;
    	color: #999;
	}
	.modal-header{
		padding: 6px 15px;
		min-height: 16.42857143px;
		border-bottom: 1px solid #e5e5e5;
	}
	.modal-body{
		overflow-y: auto;
    	max-height: 401px;
    	padding: 8px 15px;
    	position: relative;
	}
	.modal-footer{
		padding: 5px 10px;
		text-align: right;
		height:30px;
    	border-top: 1px solid #e5e5e5;
	}
	.modal-footer button{
		padding: 2px 12px;
	    font-size: 12px;
	    border-radius: 3px;
	    border: 1px solid transparent;
	    margin-bottom: 0;
    	margin-left: 5px;
	}
	.btn-close{
		color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7!important;
	}
	.btn-yes{
		color: #fff!important;
    	background-color: #19AA8D!important;
    	border-color: #19AA8D!important;
	}
	.close{
		padding: 0px;
	    opacity: 1;
	    transition: all linear .2s;
	    margin-top: -2px;
	    border: 0;
	    float: right;
	    font-size: 21px;
	    font-weight: 700;
	    line-height: 1;
	    color: #000;
	    text-shadow: 0 1px 0 #fff;
	}
	.modal-backdrop{
		position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1040;
	    background-color: #000;
	    opacity: .5;
	    display: none;
	}
	h3{
	    font-size: 14px;
	    font-weight: 700;
	    font-style: normal;
	    margin: 0;
    	line-height: 1.42857143
	}
	.modal-form-group{
		margin: 10px;
    	height: 127px;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	    padding: 10px 8px;
	}
	.modal-form-group span{
		font-size: 14px;
		font-weight: 400;
		
	}

	.staff{
		float: left;
	    margin-right: 15px;
	    border-radius: 9px;
	    background-color: #e2f2ff;
	    padding: 5px 10px;
	    margin-bottom: 5px;
	    text-align: center;
	    width: 104px;
	    height: 30px;
	    position: relative;
	}
	.staff-text{
		cursor: pointer;
		box-sizing: border-box;
	}
	.staff-close{
		float: right;
	    cursor: pointer;
		position: relative;
	    top: 3px;
	    display: inline-block;
	    font-family: 'Glyphicons Regular';
	    font-style: normal;
	    font-weight: 400;
	    line-height: 1;
	    -webkit-font-smoothing: antialiased;
	}
	#zhui{
		width:50px;
		height:20px;
		border-radius: 10px;
		position: relative;
		float: left;
	}
	.kai{
		background-color:#19AA8D!important;
		border-color:#19AA8D!important;
	}
	.guan{
		background-color:gainsboro;
		border-color:gainsboro;
	}
	#yuan{
		width:20px;
		height:20px;
		background-color:#ffffff;
		border-color:#ffffff;
		border-radius: 25px;
		position: absolute;
	}
	.text{
		color:#bfbfbf;
		font-size: 12px;
		
	}
	.input-text{
    	height: 25px;
    	font-weight: 700;
    	font-size: 14px;
    	color: #6E6E6E;
    	margin-top: 3px;
    	float: left;
	}
</style>
<script type="text/javascript">

$(function(){
	$(".select-option").change(function(){
		var id=$(".select-option option:selected").attr("name");
		$("#LT_ID").val(id);
	});
	
	$(".close").click(function(){
		guanbi();
	});
	$(".btn-close").click(function(){
		guanbi();
	});
	
	$(".btn-yes").click(function(){
		$(".pic").each(function(){
			$(this).remove();
		});
		var str="";
		$(".staff").each(function(){
			str+=$(this).attr("vlaue")+",";
			var div1=$("<div>");
			var div2=$("<div>");
			var div3=$("<div>");
			var img=$("<img>");
			div1.addClass("pic");
			div1.attr("name",$(this).attr("name"));
    		div1.attr("vlaue",$(this).attr("vlaue"));
			img.attr("src","static/easyui/themes/icons/notui.jpg");
			div2.addClass("textsex");
			div3.addClass("report-pic");
			div3.html($(this).attr("name"));
    		div1.append(img);
    		div1.append(div2);
    		div1.append(div3);
    		$(".spr-box").append(div1);
		});
		$("#shen").val(str);
		guanbi();
	});
	$(".tianjia1").click(function(){
		$(".staff").each(function(){
			$(this).remove();
		});
		$(".pic").each(function(){
			var div=$("<div>");
    		var span1=$("<span>");
    		var span2=$("<span>");
    		div.attr("name",$(this).attr("name"));
    		div.attr("vlaue",$(this).attr("vlaue"));
    		div.addClass("staff");
    		span1.addClass("staff-text");
    		span2.addClass("staff-close");
    		span2.click(function(){
    			$(this).parent().remove();
    		});
    		span1.html($(this).attr("name"));
    		span2.html("×");
    		div.append(span1);
    		div.append(span2);
    		$(".modal-form-group").append(div);
		});
		
		kaiqi();
	});
	$('.xuan').combogrid({
        panelWidth:265,
        url:'select_sousuoKuang',
        singleSelect:true,
        idField:'Staff_name',
        columns:[[
        	{field:'sortable',title:'#',width:28},
        	{field:'staff_id',hidden:true},
            {field:'Staff_name',title:'姓名',width:60},
            {field:'depart_name',title:'部门',width:60},
            {field:'Staff_phone',title:'联系电话',width:100}
        ]],
        onClickRow:function(rowIndex, rowData){
        	var i=0;
        	$(".staff").each(function(){
        		if($(this).children(".staff-text").html()==rowData['Staff_name']){
        			i=1;
        		}
        	});
    		if(i==0){
    			var div=$("<div>");
        		var span1=$("<span>");
        		var span2=$("<span>");
        		div.attr("name",rowData['Staff_name']);
        		div.attr("vlaue",rowData['staff_id']);
        		div.addClass("staff");
        		span1.addClass("staff-text");
        		span2.addClass("staff-close");
        		span2.click(function(){
        			$(this).parent().remove();
        		});
        		span1.html(rowData['Staff_name']);
        		span2.html("×");
        		div.append(span1);
        		div.append(span2);
        		$(".modal-form-group").append(div);
    		}else{
    			alert("此员工已添加过");
    		}
    	}
    });
	$(".tijiao").click(function(){
		$("#form").submit();
		$("#form").form("clear");
		$("#content-admin").panel('open').panel('refresh','kq-leave-assessor');
	});
	$("#yuan").click(function(){
		if($("#qi").val()==0){
			$("#zhui").removeClass("guan");
			$("#zhui").addClass("kai");
			$(this).animate({ 
				left:'+30px',
		  	}, 100 );
			$("#qi").val("1");
			$("#tishi").slideDown();
		}else{
			$("#zhui").removeClass("kai");
			$("#zhui").addClass("guan");
			$(this).animate({ 
				left:'0px',
		  	}, 100 );
			$("#qi").val("0");
			$("#tishi").slideUp();
		}
	});
});
function guanbi(){
	$(".modal").hide();
	$(".modal-backdrop").hide();
}
function kaiqi(){
	$(".modal").show();
	$(".modal-backdrop").show();
}

</script>
<Form action="addbusiness-shen" method="post" id="form">
	<div class="tijiao">提交</div>
	<div class="background">
		<div class="apply-news">
			<div class="text-news">出差申请</div>
		</div>
		<div class="apply-content">
			<div class="apply-center">
				<div class="center-1">
					<div class="jqlx">出差地点:</div>
					<input type="text" placeholder="出差省" name="busSheng"/>
					<input type="text" placeholder="出差市" name="busShi"/>
				</div>
				<div class="center-2">
					<div class="text-xjsh">出差时间：</div>
					<div class="rili">
					<input id="date-kaishi" type="text" class="easyui-datetimebox"  data-options="required:true,showSeconds:false"  name="busKai">
					<div class="apply-zhi">至</div>
					<input id="date-jieshu" type="text" class="easyui-datetimebox" data-options="required:true,showSeconds:false"  name="busJie">
					</div>
				</div>
				<div class="center-4">
					<div class="shenqing">出差事由：</div>
					<textarea class="textarea" name="busWhy" ng-maxlength="500" cols="2"></textarea>
				</div>
				
			</div>
		</div>
		<div class="apply-end">
			<div class="spr">审批人</div>
			<input type="hidden" id="shen" name="busXshen">
			<div class="spr-box">
				<div class="tianjia1">+添加</div>
			</div>
		</div>
	</div>
</Form>
<div class="modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close">×</button>
				<h3>添加审批人</h3>
			</div>
			<div class="modal-body">
				<input class="xuan">
					<div class="modal-form-group">
					</div >
			</div>
			<div class="modal-footer">
				<button class="btn-close">关闭</button>
				<button class="btn-yes">确定</button>
			</div>
		</div>
	</div>
</div>
<div class="modal-backdrop"></div>
</body> 